.logincomponent {
    position  : absolute;
    left      : 0;
    top       : 0;
    display   : block;
    width     : 100%;
    height    : 100%;
    overflow  : hidden;
    background: #f0f2f5 url('../../../../assets/portal.svg') no-repeat center 110px;

    .which {
        position   : absolute;
        z-index    : 9;
        padding    : 5px 0;
        margin-left: 55px;
        left       : 50%;
        top        : 365px;
        background : #fff;
        display    : block;
    }

    .loginwrap {
        width   : 1180px;
        height  : 600px;
        display : hidden;
        left    : 50%;
        top     : 50%;
        margin  : -300px 0 0 -590px;
        position: absolute;

        .ant-input {
            background: #f4f8f7;
        }

        .ant-form-item {
            margin-bottom: 30px;
        }

        div {
            position: absolute;
            width   : 350px;
        }

        .bg {
            width        : 1180px;
            height       : 600px;
            z-index      : 9;
            display      : block;
            position     : absolute;
            background   : rgba(255, 255, 255, 0.8);
            box-shadow   : 0 0 15px #aaa;
            border-radius: 20px;

            .leftwrap {
                width        : 450px;
                height       : 600px;
                display      : block;
                overflow     : hidden;
                background   : rgba(0, 150, 255, 1);
                border-radius: 20px 0 0 20px;

                .roundmodel {
                    background: #25a1e0;
                }
            }
        }

        .copyright {
            z-index    : 9;
            left       : 570px;
            top        : 40px;
            color      : #40a9ff;
            font-size  : 24px;
            font-weight: bold;

            p {
                margin : 0;
                padding: 0;
            }
        }

        .logomodel {
            z-index: 9;
            width  : 78px;
            height : 78px;
            top    : 46px;
            left   : 480px;
            display: block;
        }

        .starmodel {
            z-index   : 9;
            width     : 495px;
            height    : 579px;
            top       : 20px;
            left      : -55px;
            display   : block;
            background: url('../../../../assets/login/star.png') no-repeat;
        }

        .linemodel {
            z-index   : 9;
            width     : 428px;
            height    : 373px;
            top       : 100px;
            left      : 10px;
            display   : block;
            background: url('../../../../assets/login/line.png') no-repeat;
        }

        .nav {
            z-index    : 9;
            font-size  : 18px;
            font-weight: normal;
        }

        .titlename {
            z-index    : 9;
            left       : 640px;
            top        : 160px;
            text-align : center;
            color      : #40a9ff;
            font-size  : 24px;
            font-weight: bold;
        }

        .usermodel {
            z-index: 9;
            left   : 640px;
            top    : 240px;
        }

        .buttonmodel {
            z-index: 9;
            left   : 640px;
            top    : 410px;
        }

        .roundmodel {
            z-index      : 1;
            border-radius: 50%;
            width        : 650px;
            height       : 650px;
            top          : 323px;
            left         : -409px;
            display      : block;
            background   : #f3e32e;
        }

        .arrowmodel {
            z-index      : 1;
            width        : 0;
            height       : 0;
            top          : -480px;
            left         : 1130px;
            transform    : rotate(0deg);
            border-left  : 280px solid transparent;
            border-right : 280px solid transparent;
            border-bottom: 560px solid #2edaf3;
        }

        .camelmodel {
            z-index: 9;
            left   : 460px;
            top    : 540px;
            width  : 700px;

            span {
                width        : 20px;
                height       : 60px;
                margin       : 0 40px;
                display      : inline-block;
                background   : #d9efff;
                border-radius: 10px 10px 0 0;
            }

            span:nth-child(1) {
                height    : 55px;
                margin-top: 5px;
                animation : camel 8s 0s both infinite;
            }

            span:nth-child(2) {
                height    : 50px;
                margin-top: 10px;
                animation : camel 8s 0.5s both infinite;
            }

            span:nth-child(3) {
                height    : 55px;
                margin-top: 5px;
                animation : camel 8s 1s both infinite;
            }

            span:nth-child(4) {
                animation: camel 8s 1.5s both infinite;
            }

            span:nth-child(5) {
                height    : 55px;
                margin-top: 5px;
                animation : camel 8s 2s both infinite;
            }

            span:nth-child(6) {
                height    : 50px;
                margin-top: 10px;
                animation : camel 8s 2.5s both infinite;
            }

            span:nth-child(7) {
                height    : 55px;
                margin-top: 5px;
                animation : camel 8s 3s both infinite;
            }
        }

        .rotatemodel {
            z-index: 9;
            left   : 130px;
            top    : 200px;
            width  : 199px;
            height : 199px;

            span {
                width   : 199px;
                height  : 199px;
                position: absolute;
                display : hidden;
            }

            i {
                font-size   : 0;
                line-height : 0;
                border-style: solid;
                border-color: #0196ff;
                border-width: 10px;
                width       : 0;
                height      : 0;
                position    : absolute;
                transform   : rotate(240deg);
            }

            span:nth-child(1) {
                z-index      : 23;
                width        : 16px;
                height       : 16px;
                border-radius: 50%;
                top          : 91px;
                left         : 91px;
                background   : #fff;
                border       : 2px solid #f7f7f7;
                box-shadow   : 0 0 10px #fff;
                animation    : centre 3s infinite;
            }

            span:nth-child(2) {
                z-index      : 22;
                animation    : rotate 10s linear infinite;
                width        : 38px;
                height       : 38px;
                border       : 2px dotted #ddeefa;
                border-radius: 50%;
                top          : 80px;
                left         : 80px;
                display      : hidden;
            }

            span:nth-child(3) {
                z-index      : 21;
                animation    : unrotate 20s linear infinite;
                width        : 54px;
                height       : 54px;
                border       : 2px dotted #83cbff;
                border-radius: 50%;
                top          : 72px;
                left         : 72px;
                display      : hidden;

                i {
                    border-width: 18px;
                    transform   : rotate(330deg);
                }
            }

            span:nth-child(4) {
                width        : 70px;
                z-index      : 9;
                height       : 70px;
                border       : 2px solid #27a6ff;
                border-radius: 50%;
                top          : 65px;
                left         : 65px;
            }

            span:nth-child(5) {
                width        : 90px;
                height       : 90px;
                border       : 2px solid #a6daff;
                border-radius: 50%;
                top          : 55px;
                left         : 55px;
            }

            span:nth-child(6) {
                animation : rotate 50s linear infinite;
                background: url('../../../../assets/login/round6.png') no-repeat;
            }

            span:nth-child(7) {
                animation : unrotate 60s linear infinite;
                background: url('../../../../assets/login/round7.png') no-repeat;
            }

            span:nth-child(8) {
                animation : rotate 70s linear infinite;
                background: url('../../../../assets/login/round8.png') no-repeat;
            }

            span:nth-child(9) {
                animation : unrotate 80s linear infinite;
                background: url('../../../../assets/login/round9.png') no-repeat;
            }
        }
    }
}

@keyframes camel {
    0% {
        background: rgba(155, 198, 229, 0.3);
    }

    25% {
        background: rgba(155, 198, 229, 0.6);
    }

    50% {
        background: rgba(155, 198, 229, 0.9);
    }

    75% {
        background: rgba(155, 198, 229, 0.6);
    }

    100% {
        background: rgba(155, 198, 229, 0.3);
    }
}

@keyframes centre {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes unrotate {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}